<template>
	<view class="fens">
		<title  @titleHeight='setPaddingTop' :center="true" title="粉丝列表" iconSize="38" bgcolor="linear-gradient(45deg, #f43f3b, #ec008c)" color="#FFF"
			@toclick="toBack(1)"icon="/static/img/other/to-back.png"></title>
		<view class="fens_body" :style=" 'padding-top:'+paddingTop+'px' ">
			<image class="ima" src="../../static/img/other/fens.png"></image>
			<view class="bg_content">
				<view class="head">
					总粉丝
					<view v-if="fensCount != ''" class="h">
						{{fensCount.count + fensCount.extend_count}}人
						<text class="t">今日新增:{{fensCount.todayInvit}}</text>
						<text class="iconfont iconshengjiangjiantou_huaban1 icon"></text>
					</view>
				</view>
				<view class="bottom">
					<view v-if="fensCount != ''" class="bottom_left">
						专属粉丝：{{fensCount.count}}人
					</view>
					<view v-if="fensCount != ''" class="bottom_right">
						有效粉丝：{{fensCount.extend_count}}人
					</view>
				</view>
			</view>
			<view class="content" id="content">
				<view class="content_picker_fix">
					<view class="content_picker">
						<view class="b" :class="index == curIndex ? 'condit':'' " v-for="(item,index) in picker"
							:key='index' @click="choose(index)">
							{{item}}
							<view v-if="index == curIndex" class="line"> </view>
						</view>
						<view class="linetwo">
						</view>
					</view>
				</view>

				<!-- 	<view class="fensList">
					<view class="block" v-for="(item,i) in fensList" :key='i'>
						<view class="block_left">
							<view class="block_left_ava">
								<image class="avatar" :src="item.headimgurl" mode=""></image>
								<uni-badge class="badge" :text="item.count1" type="error" size="small"></uni-badge>
							</view>
							<view class="info">
								<text class="name t">{{item.nickname}}</text>
								<text class="register t">注册于{{item.created_at | changeTime(0)}}</text>
							</view>
						</view>
						<view class="block_right">
							{{item.created_at | changeTime(1)}}
						</view>
					</view>
				</view> -->

				<scroll-view class="fensList" scroll-y="true" :style="{height:pickHeight + 'px'}" lower-threshold='10px'
					@scrolltolower='scrollBottom'>
					<view class="block" v-for="(item,i) in fensList" :key='i'>
						<view class="block_left">
							<view class="block_left_ava">
								<image class="avatar" :src="item.headimgurl" mode=""></image>
								<uni-badge class="badge" :text="item.count1" type="error" size="small"></uni-badge>
							</view>
							<view class="info">
								<text class="name t">{{item.nickname}}</text>
								<text class="register t">注册于{{item.created_at | changeTime(0)}}</text>
							</view>
						</view>
						<view class="block_right">
							{{item.created_at | changeTime(1)}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import moment from 'moment'
	export default {
		data() {
			return {
				paddingTop:0,
				isLoad: true,
				pickHeight: 0,
				timer: null,
				curIndex: 0,
				fensCount: '',
				fensList: [],
				picker: ['专属粉丝', '有效粉丝'],
				limit: 10,
				offset: 0
			}
		},
		components: {
			title
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {

		},
		
		onShow() {
			let content = uni.createSelectorQuery().in(this).select('#content');
			content.fields({
				size: true
			}, data1 => {
				// console.log(data.height);
				let outter = uni.createSelectorQuery().in(this).select('.content_picker_fix');
				outter.boundingClientRect(data => {
					this.pickHeight = data1.height - data.height
					console.log(this.pickHeight);
				}).exec()
			}).exec()
		},
		methods: {
			setPaddingTop(data){
				this.paddingTop = data.height
				console.log('paddingTop',this.paddingTop)
			},
			
			scrollBottom() {
				if (this.timer !== null) {
					clearTimeout(this.timer)
				}
				this.offset = this.offset + this.limit
				this.timer = setTimeout(() => this.getData(), 0)
			},
			// 跳转
			toBack(i) {
				uni.navigateBack({
					delta: i
				})
			},
			//  选择内容
			choose(i) {
				if (i !== this.curIndex) {
					this.curIndex = i
					this.offset = 0
					this.fensList = []
					this.isLoad = true
					this.getData(i)
				}

			},
			// 获取数据
			getData(i = 0) {
				if (this.isLoad) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					// i = 0 获取专属粉丝数据 i = 1 获取有效粉丝数据
					let data = {
						limit: this.limit,
						offset: this.offset,
						value: ""
					}
					if (i == 0) {
						this.$api.getMyUser(data).then((res) => {
							this.fensList = [...this.fensList, ...res.data.data.rows]
							this.fensCount = res.data.data
							console.log(res.data.data.rows.length)
							if (res.data.data.rows.length == 0) {
								this.isLoad = false
							}
							uni.hideLoading()
						})
					} else {
						this.$api.getDouble(data).then((res) => {
							this.fensList = [...this.fensList, ...res.data.data.rows]
							console.log(res.data.data.rows.length)
							if (res.data.data.rows.length == 0) {
								this.isLoad = false
							}
							uni.hideLoading()
						})
					}

				}
			}
		},
		filters: {
			changeTime(v, i) {
				// i = 0 修改左边注册时间， i =1 修改右边时间
				if (i == 1) {
					const format = 'MM/D/YYYY'
					let date = new Date();
					let year = date.getFullYear(); //获取完整的年份(4位)
					let month = date.getMonth() * 1 + 1; //获取当前月份(0-11,0代表1月)
					let day = date.getDate(); //获取当前日(1-31)
					let time = year + '-' + month + '-' + day
					let time2 = v.split(' ')
					let t1Arr = time.split('-')
					let t2Arr = time2[0].split('-')
					if (parseInt(t1Arr[0]) === parseInt(t2Arr[0]) && parseInt(t1Arr[1]) === parseInt(t2Arr[1]) && parseInt(
							t1Arr[2]) === parseInt(t2Arr[2])) {
						return '今天' + ' ' + time2[1]
					} else {
						return t2Arr[1] + '-' + t2Arr[2] + ' ' + time2[1].split(':')[0] + ':' + time2[1].split(':')[1]
					}
				} else {
					let date = v.split(' ')[0].split('-')
					return date[0] + '年' + date[1] + '月' + date[2] + '日' + ' ' + v.split(' ')[1].split(':')[0] + ':' + v
						.split(' ')[1].split(':')[1]
				}
			}
		}
	}
</script>

<style lang="scss">
	.fens {
		background-color: #F1F1F1;
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.fens_body {
			position: relative;
			width: 750rpx;
			height: 559rpx;
			background: linear-gradient(45deg, #f43f3b, #ec008c);
			// background-color:#FD9031;

			.ima {
				position: absolute;
				z-index: 100;
				width: 255rpx;
				height: 289rpx;
				right: 0;
				z-index: 999;
				top: 152rpx;
			}

			.bg_content {
				color: #FFFFFF;
				padding: 0 46rpx 0 46rpx;
				width: 100%;

				.head {
					text-align: left;
					width: 100%;
					margin: auto;
					font-size: 32rpx;

					.h {
						font-size: 50rpx;

						.t {
							font-size: 20rpx;
							margin-left: 15rpx;
						}

						.icon {
							font-size: 20rpx;
						}
					}
				}

				.bottom {
					margin-top: 67rpx;
					display: grid;
					grid-template-rows: auto;
					grid-template-columns: 50vw 50vw;
					justify-items: center;
					font-size: 26rpx;

					.bottom_left {
						justify-self: left;
					}
				}
			}

			.content {
				width: 702rpx;
				// height: calc(100vh - 431rpx);
				height: calc(100vh - 431rpx);
				// height: 100%;
				// overflow-y: auto;
				// overflow: hidden;
				border-radius: 20rpx 20rpx 0px 0px;
				background-color: #FFFFFF;
				position: absolute;
				z-index: 888;
				top: 450rpx;
				left: 50%;
				transform: translateX(-50%);

				.content_picker_fix {
					position: sticky;
					top: 0;
					background-color: white;
					z-index: 1000;

					.content_picker {
						padding: 35rpx 122rpx 35rpx 122rpx;
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						color: #666666;
						position: relative;

						.linetwo {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							width: 1rpx;
							height: 30rpx;
							background-color: #E2E2E2;
						}

						.condit {
							position: relative;
							font-size: 35rpx;
							color: #EF3B5D;
							font-weight: bold;

							.line {
								position: absolute;
								height: 6rpx;
								width: 40rpx;
								left: 50%;
								transform: translate(-50%);
								bottom: -20rpx;
								background-color: #f1255d;
							}
						}
					}
				}

				.fensList {
					padding: 0 20rpx 30rpx 20rpx;

					.block {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-top: 20rpx;
						padding-bottom: 30rpx;
						border-bottom: 1px solid #F1F1F1;

						.block_left {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.block_left_ava {
								position: relative;
								margin-right: 15rpx;

								.avatar {
									width: 67rpx;
									height: 67rpx;
									border-radius: 50%;
									margin-right: 20rpx;
								}

								.badge {
									position: absolute;
									top: -18rpx;
									right: 18rpx;
									width: 25rpx;
									height: 25rpx;
								}
							}

							.info {
								.t {
									display: block;
								}

								.register {
									margin-top: 10rpx;
									font-size: 24rpx;
									color: #999999;
								}
							}
						}

						.block_right {
							font-size: 24rpx;
							color: #999999;
						}
					}

				}
			}
		}
	}
</style>
